<template>

  <el-row>
    <el-col :span="12">
      <div class="birthdayHum">
        <span >今天生日人数</span>
      </div>
      <div class="birthdayNum" @click="openPath('/toBirthdayList')">
        <span :class="{blink: todayNum !== 0}" style="color:#F76707">{{todayNum}}</span><span class="birthdayNumHum"> 人</span>
      </div>
    </el-col>

    <el-col :span="12">
      <div class="birthdayHum">
        <span >即将生日的人数</span>
      </div>
      <div class="birthdayNum" @click="openPath('/toBirthdayList')">
        <span :class="{blink: soonNum !== 0}" style="color:#36B64B">{{soonNum}}</span><span class="birthdayNumHum"> 人</span>
      </div>
    </el-col>

  </el-row>

</template>

<script>

  import http from '@/utils/http'

  export default {
    // 即将生日人员
    name: "ComingBirthday",
    data(){
      return {
        // 即将生日的人员,全部
        soonNum: 0,
        // 今天生日的人
        todayNum: 0,
        // 还有一天就生日的
        oneNum: 0,
        // 还有2天就要生日的
        twoNum: 0,
        // 还有3天要生日的
        threeNum: 0,
        // 还有4天要生日的
        fourNum: 0,
        // 还有5天要生日的
        fiveNum: 0,
        // 其他剩余时间生日的
        otherNum: 0,
      }
    },
    methods: {
      /**
       * 跳转到指定的路由
       * @param url 跳转的地址
       */
      openPath(url){
        this.$router.push({path: url})
      },
      /**
       * 获取生日人员
       */
      getBirthdayList(){
        http.get("/birthday/getBirthdayList", {
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
            if (res.data.soonList){
              this.soonNum = res.data.soonList.length
            }
            if (res.data.todayList){
              this.todayNum = res.data.todayList.length
            }
          }

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getBirthdayList()
    },
  }
</script>

<style scoped>

  .birthdayHum {
    margin: 5px;
    font-weight: 400;
    font-size: 14px;
    color: #909399;
    text-align: center
  }

  .birthdayNum {
    /*margin: 5px;*/
    font-weight: 700;
    font-size: 23px;
    /*color: #909399;*/
    text-align: center;
    cursor:pointer;
  }

  .birthdayNumHum {
    /*margin: 5px;*/
    /*font-weight: 700;*/
    font-size: 14px;
    /*color: #909399;*/
    /*text-align: center*/
  }


  /*闪烁数字*/
  @keyframes blink{
    /*开始时opacity为0(透明)，动画结束时opacity为1(不透明) 作者：让你三行代码 https://www.bilibili.com/read/cv13486217/ 出处：bilibili*/
    0%{opacity: 1;}
    50%{opacity: 1;}
    50.01%{opacity: 0;}
    100%{opacity: 0;}
  }
  .blink{
    /*animation: blink 1.5s linear infinite;*/
    animation: blink 1s linear infinite;
    -webkit-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    -ms-animation: blink 1s linear infinite;
    -o-animation: blink 1s linear infinite;
  }

</style>
